<template>
	<view class="page">
		<u-navbar title="我的动态" border @leftClick="$utils.back()" placeholder>
		</u-navbar>
		<view class="tabBox" >
			<filter @reload='reload' />
		</view>
		<view class="body">
			<z-paging @scroll='scroll' :refresher-enabled='refresher_enabled' ref="paging" style="height: 100%;" :fixed="false"
				v-model="data" @query="query" :default-page-no="1" :default-page-size="10">
				<active @refresher_enabled_change='refresher_enabled_change' @loadingChange='loading=!loading'
					@reload='reload' :playIndex='playIndex' ref='active' :loading='loading' :active='data' />
			</z-paging>
		</view>
	</view>
</template>

<script>
	import active from './components/active'
	import filter from '@/components_company/filter.vue'
	export default {
		components: {
			active,
			filter
		},
		data() {
			return {
				playIndex: 0,
				loading: true,
				data: [],
				refresher_enabled: true,
				status:undefined,
				decorate_id:undefined,
				authorizer_id:undefined,
				process_id:undefined
			}
		},
		methods: {
			scroll(e) {
				const top = e.detail.scrollTop
				let index = 0
				let domTop0 = 0
				const query = uni.createSelectorQuery().in(this.$refs.active);
				query.selectAll('.activeBox').boundingClientRect(data => {
					data.forEach((rect, domIndex) => {
						let domTop = rect.top + top
						if (index == 0) {
							domTop0 = domTop
						}
						if (top > (domTop - domTop0)) {
							index = domIndex
						}
						if (domIndex == data.length - 1) {
							this.playIndex = index
			
						}
					});
				}).exec();
			},
			refresher_enabled_change(e) {
				this.refresher_enabled = e
			},
			reload(e) {
				if (e) {
					this.status=e.status
					this.decorate_id=e.customer.id
					this.process_id=e.process.id
					this.authorizer_id=e.authorizer.id
				}
				this.$refs.paging.reload()
			},
			query(page, size) {
				let obj = {
					page,
					size,
					status:this.status,
					decorate_id:this.decorate_id,
					authorizer_id:this.authorizer_id,
					process_id:this.process_id	
				}
				uni.showLoading({
					title: ' 加载中...'
				})
				this.$api_company.My.Active(obj).then(res => {
					this.$refs.paging.complete(res.data.data.map(item=>{
						return {
							...item,
							user:{
								...item.decorate,
								nick_name:item.decorate.remark_name,
								avatar:item.user.avatar
							}
						}
					}))
					uni.hideLoading()
					this.loading = false
				}).catch(err => {
					uni.hideLoading()
					uni.$u.toast(err.message)
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding: 0rpx 0 0 40rpx;
		height: 100vh;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 10rpx);
		/* 兼容 iOS 设备 */
		padding-bottom: calc(env(safe-area-inset-bottom) + 10rpx);
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		background-color: #f5f5f5;
	}
	.tabBox {
		width: 100%;
		padding: 0 40rpx 0 0;
		box-sizing: border-box;
	}
	.body {
		flex: 1;
		margin-top: 20rpx;
	}
</style>